<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<script src="../../js/getURLParam.js"></script>
		<link rel="stylesheet" href="../../css/global.css">
		<!--<script src="../../js/mui.min.js"></script>-->
		<style>
			.title {
				margin: 20px 15px 7px;
				color: #6d6d72;
				font-size: 15px;
			}
			.mui-card .mui-control-content {
				padding: 10px;
			}
			
			.mui-control-content {
				height: 250px;
			}
			{
				background-color: #efeff4;
			}
			.mui-bar~.mui-content .mui-fullscreen { 
				top: 44px;
				height: auto;
			}
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 30;
			}
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			.mui-pull-top-tips .mui-pull-loading {
				/*-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;*/
				
				margin: 0;
			}
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			.mui-pull-top-wrapper .mui-icon.mui-reverse {
				/*-webkit-transform: rotate(180deg) translateZ(0);*/
			}
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			}
			.mui-pull-bottom-wrapper{
			}
		</style>
	</head>
	<input type="hidden" id="dateSelector" />
	<nav id="navid" class="mui-bar mui-bar-tab" style=";background-color: red;display:none;text-align:center;">
			<a id="vclduibi" class="mui-tab-item" href="#">
				<span class="ui-icon-trash" style="color:white">开始对比</span>
			</a>
	</nav>
	<body>
		<div class="mui-content" style="background-color:#efeff4;width:100%;">
			<div id="hideDiv" style="font-family:Helvetica Neue;">
			<div style="width:10%;float:left;color:grey;height:auto;margin-top:10px;text-align:center">
				<span id="leftSwip" style="font-size:20px;"><</span>
			</div>
			<div style="width:80%;float:left;color:black;height:auto;margin-top:10px;text-align:center">
				<span id="dateTime" style="font-size:20px;text-align:center;"></span>
			</div>
			<div style="width:10%;float:left;color:grey;height:auto;margin-top:10px;text-align:center">
				<span id="rightSwip" style="font-size:20px;text-align:center;">></span>
			</div>
			</div>
				<div id="buttonChoose" style="padding-top:30px;">
					<table width="100%" cellspacing="0" cellpadding="0" >
						<tr style="width:95%;text-align:center;">
							<td>
								<button style="width:100%;font-weight:bold;" class="mui-btn" id="oilparent" data-options="down" >
									<span id="oilparentSpan" style="color: #149DDD;">油耗率↓</span>
								</button>
							</td>
							<td>
								<button style="width:100%;font-weight:bold" class="mui-btn" id="runkm" data-options="up" >
									<span id="runkmSpan">里程↑</span>
								</button>
							</td>
							<td>
								<button style="width:100%;font-weight:bold" class="mui-btn" id="runoil" data-options="up" >
									<span id="runoilSpan">油耗↑</span>
								</button>
							</td>
						</tr>
					</table>
				</div>
				<div id="pullrefresh" class="mui-scroll-wrapper" style="margin-top:68.5px;display:block;text-align:left;">
					<div class="mui-scroll" id="reportItem">
						<ul class="mui-table-view mui-table-view-chevron" id='report' style="background-color:#efeff4 ;">
						</ul>
					</div>
				</div>
		</div>	
	</body>
	<script src="../../js/mui.min.js"></script>
	<script>
		var datetype=4;//时间段标记   4最接近现在
		var conTentType=3;//选择排序内容 1：里程 2 ：油耗   3：油耗率
		var sortType=1;// 1 降序  0:升序排序方式
		var pkid=new Array();//选择的设备id,
		var pagerCode=0;//页码
        var pagerStart=10;//开始长度
        var pagerCount=10;//每次加载的长度
		//进入页面的时候加载时间
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh,
						contentrefresh: '正在加载...',
					},
					up: { 
						contentrefresh: '正在加载...',
						callback: pullupRefresh,
						auto:true
					}
				}
			});
			document.getElementById("dateTime").innerHTML=getBeforeDate(7)+'~'+getBeforeDate(1);
			/**  
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					pagerCode=1;//页码
					document.getElementById("report").innerHTML="";
					document.getElementById("navid").style.display="none";
					pkid=new Array();
					getReportResult(true);//是否有数据
				}, 1000);
			}
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					pagerCode++;//页码加1
					flagbool=getReportResult(false);//是否有数据
				}, 1000); 
			}
			//获取系统当前时间
		//时间添加向左点击时间
		document.getElementById("leftSwip").addEventListener("tap",function(e){
			if(datetype>=7){
				mui.toast("更多报告请查看Iems");
				return;
			}
			datetype++;
			document.getElementById("navid").style.display="none";
			pkid=new Array();
			document.getElementById("navid").addEventListener("tap",function(){
			});
			document.getElementById("dateTime").innerHTML=getBeforeDate((datetype-3)*7)+'~'+getBeforeDate((datetype-4)*7+1);
			document.getElementById("dateSelector").value=document.getElementById("dateTime").innerHTML;
			//document.getElementById("report").innerHTML="";
			pagerCode=1;
			document.getElementsByClassName("mui-pull-loading")[0].style.display="none";
			mui("#pullrefresh").pullRefresh().pulldownLoading();
			//getReportResult();
			mui("#pullrefresh").pullRefresh().refresh(true);//重新启动上拉刷新
			//访问日志
			postLog("报告-日期切换",accountid,proversion);
		});
		//时间添加向左点击时间
		document.getElementById("rightSwip").addEventListener("tap",function(e){
			if(datetype<=4){
				mui.toast("更多报告请查看Iems");
				return;
			}
			datetype--;
			document.getElementById("navid").style.display="none";
			pkid=new Array();
			document.getElementById("dateTime").innerHTML=getBeforeDate((datetype-3)*7)+'~'+getBeforeDate((datetype-4)*7+1);
			document.getElementById("dateSelector").value=document.getElementById("dateTime").innerHTML;
			//document.getElementById("report").innerHTML="";
			pagerCode=1;
			document.getElementsByClassName("mui-pull-loading")[0].style.display="none";
			mui("#pullrefresh").pullRefresh().pulldownLoading();
			//getReportResult();
			mui("#pullrefresh").pullRefresh().refresh(true);//重新启动上拉刷新
			//访问日志
			postLog("报告-日期切换",accountid,proversion);
		});
		//油耗率点击
		document.getElementById("oilparent").addEventListener("tap",function(e){
			var orderSort=document.getElementById("oilparent").getAttribute("data-options");//排序方式
			document.getElementById("navid").style.display="none";
			pkid=new Array();
			if(orderSort=="up"){
				conTentType=3;
				sortType=1;
				document.getElementById("oilparent").setAttribute("data-options","down");
				document.getElementById("oilparentSpan").innerHTML="油耗率↓";
				document.getElementById("oilparentSpan").style.color="#149DDD";//颜色
				//处理里程排序
				document.getElementById("runkm").setAttribute("data-options","up");
				document.getElementById("runkmSpan").innerHTML="里程↑";
				document.getElementById("runkmSpan").style.color="";//颜色
				//处理油耗排序
				document.getElementById("runoil").setAttribute("data-options","up");
				document.getElementById("runoilSpan").innerHTML="油耗↑";
				document.getElementById("runoilSpan").style.color="";//颜色
			}else if(orderSort=="down"){
				conTentType=3;
				sortType=0;
				document.getElementById("oilparent").setAttribute("data-options","up");
				document.getElementById("oilparentSpan").innerHTML="油耗率↑";
				document.getElementById("oilparentSpan").style.color="#149DDD";//颜色
			}
			pagerCode=1;
			document.getElementsByClassName("mui-pull-loading")[0].style.display="none";
			 mui("#pullrefresh").pullRefresh().pulldownLoading();
			 mui("#pullrefresh").pullRefresh().refresh(true);//重新启动上拉刷新
			 //访问日志
			postLog("报告-油耗率排序",accountid,proversion);
		});
		//里程点击
		document.getElementById("runkm").addEventListener("tap",function(e){
			var orderSort=document.getElementById("runkm").getAttribute("data-options");//排序方式
			document.getElementById("navid").style.display="none";
			pkid=new Array();
			if(orderSort=="up"){
				conTentType=1;
				sortType=1;
				document.getElementById("runkm").setAttribute("data-options","down");
				document.getElementById("runkmSpan").innerHTML="里程↓";
				document.getElementById("runkmSpan").style.color="#149DDD";//颜色
				//油耗率处理
				document.getElementById("oilparent").setAttribute("data-options","up");
				document.getElementById("oilparentSpan").innerHTML="油耗率↑";
				document.getElementById("oilparentSpan").style.color="";//颜色
				//处理油耗排序
				document.getElementById("runoil").setAttribute("data-options","up");
				document.getElementById("runoilSpan").innerHTML="油耗↑";
				document.getElementById("runoilSpan").style.color="";//颜色
			}else if(orderSort=="down"){
				conTentType=1;
				sortType=0;
				document.getElementById("runkm").setAttribute("data-options","up");
				document.getElementById("runkmSpan").innerHTML="里程↑";
				document.getElementById("runkmSpan").style.color="#149DDD";//颜色
			}
			pagerCode=1;
			document.getElementsByClassName("mui-pull-loading")[0].style.display="none";
			mui("#pullrefresh").pullRefresh().pulldownLoading();
			mui("#pullrefresh").pullRefresh().refresh(true);//重新启动上拉刷新
			//访问日志
			postLog("报告-里程排序",accountid,proversion);
		});
		//油耗点击
		document.getElementById("runoil").addEventListener("tap",function(e){
			var orderSort=document.getElementById("runoil").getAttribute("data-options");//排序方式
			document.getElementById("navid").style.display="none";
			pkid=new Array();
			if(orderSort=="up"){
				conTentType=2;
				sortType=1;
				document.getElementById("runoil").setAttribute("data-options","down");
				document.getElementById("runoilSpan").innerHTML="油耗↓";
				document.getElementById("runoilSpan").style.color="#149DDD";//颜色
				//document.getElementById("oilparentSpan").style.fontWeight="bold";//粗细
				//油耗率处理
				document.getElementById("oilparent").setAttribute("data-options","up");
				document.getElementById("oilparentSpan").innerHTML="油耗率↑";
				document.getElementById("oilparentSpan").style.color="";//颜色
				//里程处理
				document.getElementById("runkm").setAttribute("data-options","up");
				document.getElementById("runkmSpan").innerHTML="里程↑";
				document.getElementById("runkmSpan").style.color="";//颜色
			}else if(orderSort=="down"){
				conTentType=2;
				sortType=0;
				document.getElementById("runoil").setAttribute("data-options","up");
				document.getElementById("runoilSpan").innerHTML="油耗↑";
				document.getElementById("runoilSpan").style.color="#149DDD";//颜色
				
			}
			pagerCode=1;
			document.getElementsByClassName("mui-pull-loading")[0].style.display="none";
			mui("#pullrefresh").pullRefresh().pulldownLoading();
			mui("#pullrefresh").pullRefresh().refresh(true);//重新启动上拉刷新
			//访问日志
			postLog("报告-油耗排序",accountid,proversion);
		});
			function getNowFormatDate() {
			    var date = new Date();
			    var seperator1 = "-";
			    var seperator2 = ":";
			    var month = date.getMonth() + 1;
			    var strDate = date.getDate();
			    if (month >= 1 && month <= 9) {
			        month = "0" + month;
			    }
			    if (strDate >= 0 && strDate <= 9) {
			        strDate = "0" + strDate;
			    }
			  	var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
				return currentdate;
				}
			//获取系统前几天
			function getBeforeDate(n) {
				var n = n;
				var d = new Date();
				var year = d.getFullYear();
				var mon = d.getMonth() + 1;
				var day = d.getDate();
				if (day <= n) {
					if (mon > 1) {
						mon = mon - 1;
					} else {
						year = year - 1;
						mon = 12;
					}
				}
				d.setDate(d.getDate() - n);
				year = d.getFullYear();
			
				mon = d.getMonth() + 1;
			
				day = d.getDate();
				s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
				return s;
			}
			var sessionid = GetQueryString("sessionid");
			var accountid=GetQueryString("accountid");
	        var proversion=GetQueryString("proversion");
	        var vclno=GetQueryString("vclno");
	        if(null==vclno){
	        	vclno="";
	        }
	        var dateTime=GetQueryString("dateTime");
	        if(dateTime==null||dateTime==""||dateTime==undefined){
	        	document.getElementById("dateSelector").value=document.getElementById("dateTime").innerHTML;
	        }else{
	        	document.getElementById("dateSelector").value=dateTime;
	        	//隐藏时间框
	        	document.getElementById("hideDiv").style.display="none";
	        	document.getElementById("buttonChoose").style.paddingTop="0px"; 
	        	document.getElementById("pullrefresh").style.marginTop="38.5px"; 
	        	
	        }
	        //var list = document.getElementById("list");

	        //获得报告结果
	        function getReportResult(isPullDown){
				var  reportul= document.getElementById("report");
				var thisdateTime=document.getElementById("dateSelector").value;//时间段
				mui.ajax('../../../APP/report',{
				data:{param:'{"proVersion":"'+proversion+'","accountId":"'+accountid+'","sessionid":"'+sessionid+'","data":{"TYPE":"'+conTentType+'","sort":"'+sortType+'","pagerCode":"'+pagerCode+'","pagerCount":"'+pagerCount+'","pagerStart":"'+pagerStart+'","dateTime":"'+thisdateTime+'","vclNo":"'+vclno+'"}}'},
				dataType:'jsonp',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:1000000,//超时时间设置为10秒；
				success:function(data){
					var jsonObj = window.JSON.parse(data);
					if(jsonObj.resultCode=="1"){
						//获取返回数据的data
						var resultdata = jsonObj.data;
						if(null!=resultdata.list&&resultdata.list.length>0){
								//获取每台设备的数据
								for(var i=0;i<resultdata.list.length;i++){
									var li=document.createElement("li");
									var reportContent="";
									li.className="mui-table-view-cell mui-media";
									li.setAttribute("style","padding-right:5px;padding-bottom:3px;");
									reportContent+='<img  class="mui-media-object mui-pull-right" date-option="0" id="a_'+resultdata.list[i].vclid+'"  src="../../images/drawable-hdpi/select_gray.png"  />'
									reportContent+='<div class="mui-media-body">'
									reportContent+='<P style="font-size: 14px;line-height:18px;"><span style="font-size: 17px;color:black;width:30%">'+resultdata.list[i].vclnum+'</span>&nbsp;&nbsp;&nbsp;<span style="width:30%">'+resultdata.list[i].prekmoil+'L/100km</span></P>'
									reportContent+='<P style="font-size: 14px;line-height:18px">里程：'+resultdata.list[i].tolkm+'Km&nbsp;&nbsp;&nbsp;油耗：'+resultdata.list[i].runoil+'L</P>'
									reportContent+='</div>'
									li.innerHTML=reportContent;
									reportul.appendChild(li);
									document.getElementById("a_"+resultdata.list[i].vclid).addEventListener("tap",function(){
										
									var srcPath=this.getAttribute("date-option");
									var vclid=this.getAttribute("id");
									if(srcPath=="0"){//灰色-置红
										this.setAttribute("date-option","1");
										this.setAttribute("src","../../images/drawable-xxhdpi/select_red.png");
										if(pkid.length==2){//将第一个顶掉
											document.getElementById("a_"+pkid[0]).setAttribute("src","../../images/drawable-xxhdpi/select_gray.png");
											document.getElementById("a_"+pkid[0]).setAttribute("date-option","0");
											var newpkId=new Array();
											newpkId[0]=pkid[1];
											newpkId[1]=vclid.replace("a_","");
											pkid=newpkId;
										}else{
											pkid[pkid.length]=vclid.replace("a_","");
										}
									}else{
										this.setAttribute("date-option","0");
										this.setAttribute("src","../../images/drawable-xxhdpi/select_gray.png");
										if(pkid.length==1){
											pkid=new Array();
										}else if(pkid.length==2){//减去一个
											var vclidclo=vclid.replace("a_","");
											if(pkid[0]==vclidclo){
												pkid[0]=pkid[1];
												pkid.splice(1,1);//删除数组中的某个元素
											}else if(pkid[1]==vclidclo){
												pkid.splice(1,1);//删除数组中的某个元素
											}
										}
										
									}
									if(pkid.length>0){
										document.getElementById("navid").style.display="block";
										//给a标签附连接
										document.getElementById("navid").addEventListener("tap",Begincompare,false);
									}else{
										document.getElementById("navid").style.display="none";
										}
									});
									}
										document.getElementsByClassName("mui-pull-loading")[0].style.display="block";
								//reportul.innerHtml="暂无数据";
								if(true!=isPullDown){
									mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
								}
										
						}else{
							if(true!=isPullDown){
								mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
							}
										
										//reportul.innerHtml="暂无数据";
							}
					}else{
						var li=document.createElement("li");
						li.className="mui-table-view-cell mui-media";
						li.innerHTML='<span style="color:black">error</span>';
						reportul.appendChild(li);
					}
					if(true==isPullDown){
						mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //关闭“正在刷新”雪花进度提示
						mui("#pullrefresh").pullRefresh().refresh(true);//重新启动上拉刷新
					}
				},
				error:function(xhr,type,errorThrown){
					//异常处理；
					var li=document.createElement("li");
					li.className="mui-table-view-cell mui-media";
					li.innerHTML='<span style="color:black">error</span>';
					reportul.appendChild(li);
					if(true==isPullDown){
						mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //关闭“正在刷新”雪花进度提示
						mui("#pullrefresh").pullRefresh().refresh(true);//重新启动上拉刷新
					}
				}
				
			});
				
	        }
	  function Begincompare(){
	  if(pkid.length==2){
		/*mui.openWindow("../expert/vclcompare.html?accountid="+accountid+"&sessionid="+sessionid+"&proversion="+proversion+"&param="+pkid[0]+"_"+document.getElementById("dateSelector").value+","+pkid[1]+"_"+document.getElementById("dateSelector").value,"vclcomparea.html")*/
		alert("2_"+pkid[0]+"_"+document.getElementById("dateSelector").value.replace("~","_")+","+pkid[1]+"_"+document.getElementById("dateSelector").value.replace("~","_"))
		window.webkit.messageHandlers.Begincompare.postMessage("2_"+pkid[0]+"_"+document.getElementById("dateSelector").value.replace("~","_")+","+pkid[1]+"_"+document.getElementById("dateSelector").value.replace("~","_"));
		
		}else{
		window.webkit.messageHandlers.Begincompare.postMessage("1_"+pkid[0]+"_"+document.getElementById("dateSelector").value);
		/*mui.openWindow("../expert/vclcompare.html?accountid="+accountid+"&sessionid="+sessionid+"&proversion="+proversion+"&param="+pkid[0]+"_"+document.getElementById("dateSelector").value,"vclcomparea.html")*/
		}
	  }
	</script>

</html>